<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                       <input type="checkbox" id="j_cball"> 
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>ip8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>ip7</td>
                    <td>6000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>ip4</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>ip5</td>
                    <td>5000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //让所有复选框checked属性（选中状态）跟随全选按钮
     var inp=document.getElementById('j_cball')
     var inps=document.getElementById('j_tb').getElementsByTagName('input')
     inp.onclick=function(){
         console.log(this.checked)
         for(var i=0;i<inps.length;i++){
             inps[i].checked=this.checked
         }
     }


     for(var i=0;i<inps.length;i++){
         inps[i].onclick=function(){
             var flag=true
             for(var i=0;i<inps.length;i++){
                 if(!inps[i].checked){
                     flag=false

                 }

             }
             inp.checked=flag
         }
     }
     //复选框全部选中，全选按钮选中
   /*   for(var i=0;i<inps.length;i++){//绑定所有的复选框按钮
         inps[i].onclick=function(){//点击每一个按钮
            //flag:控制全选按钮是否被选中
            var flag=true
             for(var i=0;i<inps.length;i++){//每点击一个按钮，都会检查其他按钮是否被选中
                if(!inps[i].checked){
                    flag=false
                    break
                }

             }
             inp.checked=flag

         }
     } */







      /*   var inp=document.getElementById('j_cball')//获取全选按钮
        //获取tbody里面所有的复选框
        var inps=document.getElementById('j_tb').getElementsByTagName('input')
        inp.onclick=function(){
           console.log(this.checked); 
           for(var i=0;i<inps.length;i++){
               inps[i].checked=this.checked
           }
        } */

    </script>
</body>
</html>